<template>
  <div class="screen-root">
    <div id="screen">
      <div>农业大屏</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // 数据大屏自适应函数
  import { onMounted, onUnmounted } from 'vue';

  const handleScreenAuto = (): void => {
    const designDraftWidth = 1920; //设计稿的宽度
    const designDraftHeight = 1080; //设计稿的高度
    // 根据屏幕的变化适配的比例
    const scale =
      document.documentElement.clientWidth / document.documentElement.clientHeight <
      designDraftWidth / designDraftHeight
        ? document.documentElement.clientWidth / designDraftWidth
        : document.documentElement.clientHeight / designDraftHeight;
    const screenEle = document.querySelector('#screen') as HTMLElement;
    // 缩放比例
    if (screenEle) {
      screenEle.style.transform = `scale(${scale}) translate(-50%, -50%)`;
    }
  };
  onMounted(() => {
    handleScreenAuto();
    // 绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => handleScreenAuto();
  });
  onUnmounted(() => {
    window.onresize = null;
  });
</script>

<style scoped lang="less">
  .screen-root {
    width: 100%;
    height: 100%;
    background: #0a1541;
    position: relative;
    #screen {
      display: inline-block;
      width: 1920px; //设计稿的宽度
      height: 1080px; //设计稿的高度
      transform-origin: 0 0;
      position: absolute;
      left: 50%;
      top: 50%;
      background-size: contain;
      background-repeat: no-repeat;
      color: white;
    }
  }
</style>
